<template>
    <div class="ProductControl">
        <div class="top">
            <div class="left">
                <div class="left-title">
                    <el-icon :size="16">
                        <Grid />
                    </el-icon>
                    产品管理
                </div>
                <p>只需要一些简单配置实现一对多</p>
            </div>
            <div class="right">
                <el-col :span="6" class="inline-input">
                    <el-autocomplete v-model="state1" :trigger-on-focus="false" clearable placeholder="商品名称" />
                </el-col>
                <el-button type="primary" @click="find">
                    <el-icon>
                        <Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button type="success" @click="addList">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新建
                </el-button>
                <el-button type="primary" @click="updata">
                    <el-icon>
                        <EditPen />
                    </el-icon>
                    编辑
                </el-button>
                <el-button type="danger" @click="delList">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    删除
                </el-button>
                <div class="grid">
                    <Grid style="width: 1em; height: 1em; margin-top: 9px;" />
                </div>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog v-model="dialogFormVisible" title="编辑">
            <el-form :model="form">
                <el-form-item label="商品id：" :label-width="formLabelWidth" v-if="isShow">
                    <el-input :disabled="disabled" v-model="form.id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="商品名称：" :label-width="formLabelWidth">
                    <el-input :disabled="disabled" v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="商品编号" :label-width="formLabelWidth">
                    <el-input :disabled="disabled" v-model="form.number" autocomplete="off" />
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input :disabled="disabled" v-model="form.price" autocomplete="off" />
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input :disabled="disabled" v-model="form.comment" autocomplete="off" />
                </el-form-item>
               
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button  @click="add" v-if="isShow">添加</el-button>
                    <el-button :disabled="disabled" @click="compile" v-else>保存</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">
                        取消
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <div class="center">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" stripe border
                :header-cell-style="{ background: 'rgb(250, 250, 250)' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="商品名称" width="250" property="name" sortable />
                <el-table-column property="number" label="商品编号" width="180" />
                <el-table-column property="price" label="价格" width="180" />

                <el-table-column label="审核状态" width="180">
                    <template #default="scope">
                        <span class="audit" v-if="scope.row.audit">审核中</span>
                    </template>
                </el-table-column>

                <el-table-column property="comment" label="备注" width="180" />
                <el-table-column property="creator" label="创建人" width="180" />
                <el-table-column property="creationTime" label="创建时间" width="250" sortable />
                <el-table-column label="操作" show-overflow-tooltip fixed="right">
                    <template #default="scope">
                        <span class="operation" @click="check(scope)">{{ scope.row.operation }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-config-provider :locale="locale">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[2, 4]" layout="->,total, sizes, prev, pager, next, jumper"
                        :total="count" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </el-config-provider>
            </div>
        </div>
        <div class="down">
            <el-tabs type="border-card">
                <el-tab-pane label="产品颜色">
                    <div class="top">
                        <div class="left">
                            <div class="left-title">
                                <el-icon :size="16">
                                    <Grid />
                                </el-icon>
                                产品颜色
                            </div>
                        </div>
                        <div class="right">
                            <el-col :span="6" class="inline-input">
                                <el-select v-model="value" class="m-2" placeholder="请输入颜色">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-col>
                            <el-button type="primary">
                                <el-icon>
                                    <Search />
                                </el-icon>
                                查询
                            </el-button>
                            
                            <el-button type="success">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                                新建
                            </el-button>
                            <el-button type="primary">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                编辑
                            </el-button>
                            <el-button type="danger">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                                删除
                            </el-button>
                            <div class="grid">
                                <Grid style="width: 1em; height: 1em; margin-top: 9px;" />
                            </div>
                        </div>
                    </div>
                    <el-table ref="multipleTableRef" height="300px" :data="colorData" style="width: 100%" stripe border
                        :header-cell-style="{ background: 'rgb(250, 250, 250)' }">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="颜色" width="150" sortable />
                        <el-table-column label="数量" width="150" />
                        <el-table-column label="单位" width="180" />
                        <el-table-column label="图片" width="150" />
                        <el-table-column label="备注" width="150" />
                        <el-table-column label="创建人" width="180" />
                        <el-table-column label="创建时间" width="150" sortable />
                        <el-table-column label="修改人" width="180" />
                        <el-table-column label="修改时间" width="250" sortable />
                        <el-table-column label="操作" show-overflow-tooltip fixed="right" />
                    </el-table>
                    <div class="pagination">
                        <el-config-provider :locale="locale">
                            <el-pagination v-model:current-page="currentPage5" v-model:page-size="pageSize5"
                                :page-sizes="[2, 4]" layout="->,total, sizes, prev, pager, next, jumper" :total="0"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </el-config-provider>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="产品尺寸">
                    <div class="top">
                        <div class="left">
                            <div class="left-title">
                                <el-icon :size="16">
                                    <Grid />
                                </el-icon>
                                产品尺寸
                            </div>
                        </div>
                        <div class="right">
                            <el-col :span="6" class="inline-input">
                                <el-select v-model="value" class="m-2" placeholder="请输入尺寸">
                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-col>
                            <el-button type="primary">
                                <el-icon>
                                    <Search />
                                </el-icon>
                                查询
                            </el-button>
                            
                            <el-button type="success">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                                新建
                            </el-button>
                            <el-button type="primary">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                编辑
                            </el-button>
                            <el-button type="danger">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                                删除
                            </el-button>
                            <div class="grid">
                                <Grid style="width: 1em; height: 1em; margin-top: 9px;" />
                            </div>
                        </div>
                    </div>
                    <el-table ref="multipleTableRef" height="300px" :data="sizeData" style="width: 100%" stripe border
                        :header-cell-style="{ background: 'rgb(250, 250, 250)' }">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="尺寸" width="250" sortable />
                        <el-table-column label="单位" width="180" />
                        <el-table-column label="备注" width="180" />
                        <el-table-column label="创建人" width="180" />
                        <el-table-column label="创建时间" width="250" sortable />
                        <el-table-column label="修改人" width="180" />
                        <el-table-column label="修改时间" width="250" sortable />
                        <el-table-column label="操作" show-overflow-tooltip fixed="right" />
                    </el-table>
                    <div class="pagination">
                        <el-config-provider :locale="locale">
                            <el-pagination v-model:current-page="currentPage6" v-model:page-size="pageSize6"
                                :page-sizes="[2, 4]" layout="->,total, sizes, prev, pager, next, jumper" :total="0"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </el-config-provider>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElTable } from 'element-plus'
import { ElConfigProvider } from 'element-plus'
import { Grid, Search, Plus, EditPen, Delete } from '@element-plus/icons-vue'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import axios from 'axios'
// 使用中文包修改分页
const locale = zhCn
// 绑定搜索框内容
const state1 = ref('')
// 获取选中的数据
const multipleSelection = ref([])
//设置上部表格每页显示条目个数
const pageSize = ref(2)
// 设置上部表格当前页数
const currentPage = ref(1)
// 定义总页数
const count = ref(0)
// 监听上部表格每页显示条目个数变化
const handleSizeChange = (val) => {
    console.log(`${val} 每页显示多少`)
    pageSize.value = val
    loadPageAll()
}
// 监听当前页变化
const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`)
    currentPage.value = val
    loadPageAll()
}
// 定义是否显示
let isShow = ref(false);



//设置下部颜色表格每页显示条目个数
const pageSize5 = ref(2)
// 设置下部颜色表格当前页数
const currentPage5 = ref(1)

//设置下部尺寸表格每页显示条目个数
const pageSize6 = ref(2)
// 设置下部尺寸表格当前页数
const currentPage6 = ref(1)


// 下部seclect 选择的值
const value = ref('')
// 下部seclect绑定的颜色数组
const options = [
    { value: '黑色', label: '黑色' },
    { value: '白色', label: '白色' },
    { value: '蓝色', label: '蓝色' },
]
// 下部seclect绑定的尺寸数组
const options2 = [
    { value: 'L', label: 'L' },
    { value: 'XL', label: 'XL' },
    { value: 'XXL', label: 'XXL' },
]
// 上部表格数据
const tableData = ref([])
// 底部颜色表格
const colorData = ref([])
// 底部尺寸表格
const sizeData = ref([])
// 定义multipleSelection的length
let length = 0
// 监听选中的数据并添加到数组multipleSelection中
const handleSelectionChange = (val) => {
    multipleSelection.value = JSON.parse(JSON.stringify(val))
    length =  multipleSelection.value.length
    console.log(multipleSelection.value);
}

// 获取所有数据
// let loadTable = async () => {
//     let { data } = await axios.get('zspGetAll')
//     // console.log(data);
//     tableData.value = data
// }
// 删除所选内容
let delList = async () => {
    // 判断multipleSelection的length
    if (length >= 1) {
        if (!confirm(`确定删除这${length}条数据吗？`)) return
        let { data } = await axios.post('zspDel', { arr: multipleSelection.value })
        if (data) {
            alert('删除成功')
            loadPageAll()
        } else {
            alert('找不到删除的内容')
        }
    }
}
// 定义弹出框状态及数据
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const disabled = ref(false)
const form = ref({
    id : '',
    name : '',
    number : '',
    price : '',
    audit : '',
    comment : '',
    creator : '',
    creationTime : '',
    operation : '',
})
// 点击编辑 将选中的数据放到弹出框中
let updata = ()=>{
    if (length==1) {
        dialogFormVisible.value = true
        form.value = multipleSelection.value[0]
        disabled.value = false
        console.log(form.value);
    }else if(length>1){ 
        alert('只能选中一条数据编辑！')
    }else{
        alert('请选中需要编辑的内容')
    }
}
// 点击保存 将修改完成的数据上传到后端数据中
let compile =async ()=>{
    let {data} = await axios.post('zspUpDate',form.value)
    if (data) {
        alert('编辑成功')
        dialogFormVisible.value = false
        loadPageAll()
    }
}
// 点击查看
let check =(val)=>{
    dialogFormVisible.value = true
    form.value = val.row
    disabled.value  = true
}
// 定义时间
    var a = new Date().getTime(); //获取到当前时间戳
	var b = new Date(a); //创建一个指定的日期对象
	function nowDate(now) {
		var year = now.getFullYear(); //年份
		var month = now.getMonth() + 1; //月份（0-11）
		var date = now.getDate(); //天数（1到31）
		var hour = now.getHours(); //小时数（0到23）
		var minute = now.getMinutes(); //分钟数（0到59）
		var second = now.getSeconds(); //秒数（0到59） 
		return (
			year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
		)
    }
// 定义添加
let addList =()=>{
    isShow.value = true
    dialogFormVisible.value = true
    form.value = {
        id : '',
        name : '',
        number : '',
        price : '',
        comment : '',
        creationTime : nowDate(b),
    }
    console.log(form.value);
}
let add =async ()=>{
    let { data } = await axios.post('zspGetAdd',form.value)
    if (data) {
        alert('添加成功')
        isShow.value = false
        dialogFormVisible.value = false
        loadPageAll()
    }
}

// 获取数据 及分页 模糊查询
let loadPageAll = async ()=>{
    let {data} = await axios.get('GetPageAll',{
        params:{
            name: state1.value,
            pageSize: pageSize.value,
            currentPage: currentPage.value
        }
    })
    tableData.value = data.data
    count.value = data.count
}
let find=()=>{
    currentPage.value = 1
    pageSize.value = 4
    loadPageAll()
}
onMounted(() => {
    loadPageAll()
})

</script>
<style scoped lang='scss'>
.ProductControl {
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;

    .top {
        display: flex;

        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;

            .left-title {
                padding-bottom: 7px;
                border-bottom: 2px solid black;
                font-weight: bold;
                margin-right: 10px;
            }

            p {
                height: 20px;
            }

        }

        .right {
            display: flex;
            justify-content: space-around;

            .inline-input {
                margin-right: 10px;
            }

            .grid {
                font-size: 12px;
                width: 30px;
                height: 30px;
                text-align: center;
                align-items: center;
                color: rgb(66, 66, 66);
                border-radius: 3px;
                border: 1px solid #ccc;
                cursor: pointer;
            }

            .grid:hover {
                border: 1px solid rgb(64, 158, 255);
                color: rgb(64, 158, 255);
            }
        }
    }

    .center {
        margin: 10px 0;

        .audit {
            padding: 2px 8px;
            font-size: 12px;
            display: inline-block;
            background-color: rgb(227, 225, 228);
            border-radius: 10px;
            color: rgb(103, 195, 255);
        }

        .operation {
            color: rgb(103, 195, 255);
            cursor: pointer;
        }
    }

    .down {
        .top {
            display: flex;
            margin-bottom: 10px;
            justify-content: space-between;

            .left {
                align-items: center;

                .left-title {
                    padding-bottom: 7px;
                    border-bottom: 2px solid black;
                    font-weight: bold;
                    margin-right: 10px;
                }
            }

            .right {
                display: flex;
                justify-content: space-around;

                .inline-input {
                    margin-right: 10px;
                }
            }

        }

    }

    .pagination {
        padding: 10px 0;
    }
}
</style>